<template>
  <div class="app-container">
    <div>注意：非懒加载</div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="defaultProps">
      <el-table-column
        v-for="(col, index) in showTheads"
        :key="index"
        :prop="col.property"
        :sortable="col.sort"
        :sort-orders="['ascending', 'descending']"
        :label="col.label"
        :width="col.width"
      />
    </el-table>
  </div>
</template>

<script>
import { treeApi } from './api'

// 所有列对象
const theadOptions = [
  { property: 'name', label: 'name', width: 200, show: true, edit: true, sort: false },
    { property: 'id', label: 'ID', width: 200, show: true, edit: false, sort: false },
  { property: 'a2deptId', label: 'a2dept_id', width: 200, show: true, edit: true, sort: false },
  { property: 'deleteflag', label: '删除标志', width: 200, show: true, edit: true, sort: false },
  { property: 'createdate', label: '创建日期', width: 200, show: true, edit: false, sort: false },
  { property: 'createman', label: '创建人', width: 200, show: true, edit: false, sort: false },
  { property: 'modifydate', label: '修改日期', width: 200, show: true, edit: false, sort: false },
  { property: 'modifyman', label: '修改人', width: 200, show: true, edit: false, sort: false },
]

export default {
    name: 'A2deptTreeTable',

    data() {
        return {
            tableData: [],
            defaultProps: { children: 'a2deptList' },
            // 默认表头控制
            theadOptions: theadOptions,
            showTheads: [] // 默认表头 Default header
        }
    },

    mounted() {
        this.initTreeTable()
    },

    methods: {
        initTreeTable() {
            theadOptions.forEach(col => {
                if (col.show) {
                    this.showTheads.push(col)
                }
            })
            treeApi({ id: 1 }).then((result) => {
                if (result.success) {
                    this.tableData = [result.obj]
                }
            })
        }
    }
}
</script>
<style>

</style>
